import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:imperius_insights/portal/state/mobx/widget-state.dart';
import 'package:imperius_insights/treaty/palette.dart';
import 'package:imperius_insights/treaty/strings.dart';

import 'markup.dart';
import 'view_model.dart';

class DiagnosticScreen extends StatefulWidget {
  DiagnosticScreen();

  @override
  State<StatefulWidget> createState() {
    return DiagnosticState();
  }
}

class DiagnosticState extends MobXWidgetState<DiagnosticScreen, ViewModel> {
  @override
  ViewModel createStore() {
    final scrollController = ScrollController();
    final vm = ViewModel();
    vm.setupListController(scrollController);
    return vm;
  }

  DiagnosticState();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(Strings.toolbox_network_title), backgroundColor: palette.theme,),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Expanded(
              child: Observer(
                builder: (_) {
                  return ListView.builder(
                    controller: viewModel.scrollController,
                    itemBuilder: buildInvestigationItem,
                    itemCount: viewModel.investigations.length,
                  );
                },
              ),
            ),
          ],
        ));
  }

  Widget buildInvestigationItem(BuildContext context, int index) {
    final investigation = this.viewModel.investigations[index];
    final status = investigation.status;

    return Container(
      decoration: BoxDecoration(
          color: investigateStatusToColor(status),
          borderRadius: BorderRadius.circular(1)),
      padding: const EdgeInsets.all(10),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          buildIndicator(status),
          Padding(padding: EdgeInsets.only(left: 5)),
          Expanded(
              child: Text('${investigation.text}',
                  style: TextStyle(color: Colors.white)))
        ],
      ),
    );
  }

  ///
  /// check_circle, check_circle_outline, close, cloud_off, done, done_outline, error, error_outline
  buildIndicator(EnumInvestigateStatus status) {
    const double size = 20;
    if (status == EnumInvestigateStatus.underway) {
      return SpinKitFadingCircle(color: Colors.white, size: size);
    }
    if (status == EnumInvestigateStatus.pass) {
      return Icon(Icons.assignment_turned_in, color: Colors.white, size: size);
    }
    if (status == EnumInvestigateStatus.error) {
      return Icon(Icons.block, color: Colors.white, size: size);
    }
    if (status == EnumInvestigateStatus.warn) {
      return Icon(Icons.assignment_late, color: Colors.white, size: size);
    }
    if (status == EnumInvestigateStatus.none) {
      return Icon(Icons.adjust, color: Colors.white, size: size);
    }
    if (status == EnumInvestigateStatus.pending) {
      return Icon(Icons.access_time, color: Colors.white, size: size);
    }
    if (status == EnumInvestigateStatus.suggest) {
      return Icon(Icons.error, color: Colors.white, size: size);
    }
  }
}
